<template>
  <div id="app" class="skLifeTable">
    <a-card :bordered="true">
      <a-row type="flex" justify="start">
        <a-col :sm="22" :xxl="22">
          <a-select
            default-value=""
            v-model="studentInfo.semesterId"
            class="class-select"
            style="width: 190px;"
            @change="getDataFrom()"
          >
            <a-select-option v-for="item in semesterList" :key="item.id" :value="item.id">
              {{ item.semesterName }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          <span class="subtitle" style="margin-bottom: 14px;">数据时间：{{dataDate}}</span>
        </div>
        <div class="ant-card-extra">
          <div class="left-circle-icon">
            <a-icon type="left-circle"  @click="closeTable" style="font-size: 22px;"/>
          </div>
        </div>
      </div>
      <a-row :gutter="[12, 28]">
        <a-col>
          <a-card>
            <div ref="lineChart" :style="{width:'100%',height:'368px'}"></div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import skLifeStudentTable from "./skStudentTable.vue";
import { querySkSemester } from '@/api/management.js'
import { getAction } from '@/api/manage'
export default {
  name: 'skStudent',
  data() {
    return {
      loading:false,
      dataDate: '',
      semesterList: [],
      dataSource: [],
      columns: [],
      url: {
        list: 'health/skBmiRecord/queryStudentBmiHistory'
      },
      studentList: [],
    }
  },
  props:{
    studentInfo: {
      type: Object,
      default: () => {}
    },
  },
  components: {
    skLifeStudentTable
  },

  filters: {},

  computed: {},
  activated() {
  },
  
  created () {
    this.dataDate = this.$skCommon.getDate(1);
    this.getSkSemester();
  },
  mounted() {
    this.load()
  },
  
  methods: {
    load() {
      // 查询列表数据
      const paramsTotal = {
        statisticalScope: 'student',
        studentId: this.studentInfo.studentId,
        semesterId: this.studentInfo.semesterId
      }
      getAction(this.url.list, paramsTotal).then(res => {
        if(res.success) {
          this.studentList = res.result
          this.initLineChart();
        } else {
          this.$message.warning(res.message);
          this.loading = false;
        }
      })
    },
    // 关闭表格页面
    closeTable(){
      let data = {
        show:true
      }
      this.$emit("cardData",data);
    },
    // 获取参数
    getDataFrom(val){
      this.load();
    },
    initLineChart() {
      var myChartSports;
      var el = this.$refs.lineChart;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }

      var categorySports = [];
      var xheightData = [];
      var xWeightData = [];
      this.studentList.forEach(el => {
        categorySports.push(el.measurementDate);
      });
      this.studentList.forEach(el => {
        xheightData.push(el.height);
      })
      this.studentList.forEach(el => {
        xWeightData.push(el.weight);
      })
      var legendTitle = ['身高(cm)', '体重(kg)'];

      // option
      let optionSports = {
        backgroundColor: '#fff',
        title : {
          show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: this.studentInfo.studentName + '历史数据',//主标题文本，'\n'指定换行
          x:'left',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
	        y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        },
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: legendTitle,
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          left: '14%',
          top: '10%',
          right: '13%',
          bottom: '10%'
        },
        xAxis: {
          data: categorySports,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },

        yAxis: [
          {
            name: legendTitle[0],
            min:80,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: legendTitle[1],
            min:10,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
        ],
        series: [
          {
            name: legendTitle[0],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0BA6E3',
                label : {
                  position: 'bottom',
                  show: true // 显示数据
                },
              }
            },
            data: xheightData
          },
          {
            name: legendTitle[1],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#FFC005',
                label : {
                  show: true // 显示数据
                },
              }
            },
            data: xWeightData
          },
        ]
      }

      myChartSports.setOption(optionSports);
      window.addEventListener("resize", ()=>{
        myChartSports.resize();
      })
    },
    // 学期列表
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            this.semesterList = res.result.records
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import '~@assets/less/skReport.less';
</style>
